<template>
  <div id="active_page_box"  v-if="showModal && isShowActivePage && isEnglis !== 'en'">
    <div style="position: relative;width: 760px;height: 100%;margin: auto">
      <div class="active-page-img" :style="activeBg">
        <div class="active-page-close" @click.stop="closeModal"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ActivePage',
    data () {
      return {
        showModal: true,
        activeBg: '',
        isEnglis: ''
      }
    },
    methods: {
      closeModal () {
        this.showModal = false
      },
      openModal () {
        this.showModal = true
      }
    },
    computed: {
      isShowActivePage () { // 活动时间
        let _url = this.$store.state.iframeMessage.zjkf.url
        if (_url) {
          this.activeBg = 'background:url(' + _url + ') no-repeat;background-size:100% auto'
        }
        return _url
      }
    },
    beforeMount () {
      this.isEnglis = window.localStorage.lang || 'zh_CN'
    }
  }
</script>
<style>
  #active_page_box {
    position: fixed;
    z-index: 19921;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.3);
  }
  .active-page-img{
    width:760px;
    height:450px;
    background-repeat: no-repeat;
    background-size:100% auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    color:#fff;
  }
  .active-page-close{
    transform:rotate(0deg);
    width: 30px;
    height: 30px;
    background:url('img/login/close.png') no-repeat;
    position: absolute;
    background-size: contain;
    top: 8px;
    right: 10px;
    cursor: pointer;
    text-align:center;
  }
  .active-page-close:hover {
    /*transform:rotate(80deg);*/
    animation:run 0.2s linear 0s 1;
    -webkit-animation:run 0.2s linear 0s 1;
  }
  .replay1 {
    position: absolute;
    bottom: 118px;
    text-align: center;
    left: 325px;
    color: #eed89f;
    font-size: 10px;
  }
  .replay {
    position: absolute;
    bottom: 100px;
    text-align: center;
    left: 325px;
    color: #eed89f;
    font-size: 10px;
  }
  .active_time {
    position: absolute;
    bottom: 30px;
    text-align: center;
    width: 100%;
    color: #988a64;
    font-size: 10px;
  }
  @keyframes run{
    from{
      transform:rotate(0deg);
    }
    to{
      transform:rotate(180deg);
    }
  }
</style>
